<template>
  <van-nav-bar title="潮引力 CHARM IN" />

  <!-- 轮播图：优惠券 -->
  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item
      @click="ToCoupon(item.id)"
      v-for="item in CouponList"
      :key="item.id"
    >
      <van-image
        width="100%"
        height="180px"
        fit="cover"
        :src="item.thumb_cdn"
      />
    </van-swipe-item>
  </van-swipe>

  <!-- 选项卡 -->
  <van-grid :border="false" :column-num="4">
    <van-grid-item to="/product" text="全部商品">
      <template #icon>
        <van-image width="50" height="50" src="/assets/images/quanbu.png" />
      </template>
    </van-grid-item>
    <van-grid-item to="/live" text="商品直播">
      <template #icon>
        <van-image width="50" height="50" src="/assets/images/zhibo.png" />
      </template>
    </van-grid-item>
    <van-grid-item to="/coupon" text="优惠活动">
      <template #icon>
        <van-image width="50" height="50" src="/assets/images/youhui.png" />
      </template>
    </van-grid-item>
    <van-grid-item to="/product/rank" text="榜单排行">
      <template #icon>
        <van-image width="50" height="50" src="/assets/images/bangdan.png" />
      </template>
    </van-grid-item>
  </van-grid>

  <!-- 商品推荐 -->
  <div class="type">新品推荐</div>
  <div class="list">
    <div class="item" v-for="item in ProductList" :key="item.id">
      <router-link :to="{ path: '/product/info', query: { proid: item.id } }">
        <div class="thumb">
          <van-image
            width="100%"
            height="150px"
            fit="cover"
            :src="item.thumb_text"
          />
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="box">
          <div class="price">
            <span v-if="item.live_price > 0">￥{{ item.live_price }}</span>
            <span :class="item.live_price ? 'product_price' : ''"
              >￥{{ item.price }}</span
            >
          </div>
          <div class="buy-count">{{ item.buy_count }}人付款</div>
        </div>
        <div class="box">
          <div class="region">{{ item.region_text }}</div>
          <div class="chat">
            <van-icon name="chat-o" color="#ff5000" size="16" />
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script setup>
// 选项式 this => proxy
const { proxy } = getCurrentInstance();
// 响应式数据
const ProductList = ref([]);
const CouponList = ref([]);
// 挂载前钩子
onBeforeMount(() => GetHomeData());
// 获取首页数据
const GetHomeData = async () => {
  let result = await proxy.$http.post({
    url: "/index/index",
  });
  // 通过响应式数据渲染页面
  if (result.code === 1) {
    ProductList.value = result.data.ProductList;
    CouponList.value = result.data.CouponList;
  }
};
// 点击轮播图跳转到优惠券详情页面
const ToCoupon = (cid) =>
  proxy.$router.push({ path: "/coupon/info", query: { cid } });
</script>

<style scoped>
@import url("/assets/css/home.css");
</style>